<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>首页精选</title>
		<script src="../js/vue.js"></script>
		<script src="../js/axios.min.js"></script>
		<script src="../js/elementui.js"></script>
		<script src="../js/jquery3.5.1.js"></script>
		<link rel="stylesheet" href="../css/index.css" />
		<link rel="stylesheet" href="../css/gun.css" />
		<link rel="stylesheet" href="../css/choiceness.css" />
		<script src="../layui/layui.js"></script>
		<link rel="stylesheet" href="../layui/css/layui.css">
	</head>
	<body>
		<div id="app">
			<div id="box">
				<div id="sort">
					<ul class="sort_ul">
						<li @click="changeList($event)" class="sort_li">
							<input type="hidden" value="0" />
							<span style="color: white;border-bottom:#FF1493 3px solid ;" class="changen">全部</span>
						</li>
						<li class="sort_li" v-for="c in classityList" @click="changeList($event)">
							<input type="hidden" :value="c.id" />
							<span class="changen">{{c.classify}}</span>
						</li>
					</ul>
				</div>
				<div id="main">
					<div class="main_div">
						<div class="image-container">
							<img class="mianimg" src="../img/父子母女.jpg" />
						</div>
						<div class="liketime">
							<div class="like">
								<i class="layui-icon layui-icon-heart" style="font-size: 14px; color: white;"></i>21万
							</div>
							<div class="time">2:30</div>
						</div>
						<div class="tilie">人间白首，如果是这样，有些事情是不是还不如不见呢？
							<div class="author"><span>@不想说你</span>&nbsp;·&nbsp;12小时前</div>
						</div>
					</div>
					<div class="main_div">
						<div class="image-container">
							<img class="mianimg" src="../img/临摹练习.png" />
						</div>
						<div class="liketime">
							<div class="like">
								<i class="layui-icon layui-icon-heart" style="font-size: 14px; color: white;"></i>1314
							</div>
							<div class="time">1:30</div>
						</div>
						<div class="tilie">最新的绘画教程，快来看 #教程 #绘画
							<div class="author"><span>@不想说你</span>&nbsp;·&nbsp;12小时前</div>
						</div>
					</div>
					<template v-for="video in videoList">
						<div class="main_div">
							<div class="image-container">
								< img class="mianimg" src="../img/父子母女.jpg" />
							</div>
							<div class="liketime">
								<div class="like">
									<i class="layui-icon layui-icon-heart"
										style="font-size: 14px; color: white;"></i>{{video.likeNum}}
								</div>
								<div class="time">2:30</div>
							</div>
							<div class="tilie">{{video.title}}
								<div class="author">
									<span>@{{video.userinfo.userName}}</span>&nbsp;·&nbsp;{{video.releaseTime}}</div>
							</div>
						</div>
					</template>
				</div>
			</div>
		</div>
	</body>
	<script>
		new Vue({
			el: "#app",
			data: {
				nowClassId: 0,
				classityList: [],
				videoList: [],
				num: 12
			},
			methods: {
				changeList(e) {
					this.nowClassId = e.currentTarget.firstElementChild.value
					//样式修改
					const elements = document.querySelectorAll('.changen');
					elements.forEach(el => {
						el.style.color = "#cccccf"
						el.style.border = "none"
					});
					e.currentTarget.lastElementChild.style.color = "white"
					e.currentTarget.lastElementChild.style.borderBottom = "#FF1493 3px solid"
					console.log(this.nowClassId)
					axios.get('http://localhost:8080/doubi/getClassifiedVideo?classifyId=' + this.nowClassId).then(
						response => {
							//设置视频列表
							this.videoList = response.data
						}).catch(error => {
						console.error(error);
					});
				}
			},
			mounted() {
				//查询分类
				axios.get('http://localhost:8080/doubi/getClassify').then(response => {
					this.classityList = response.data
				}).catch(error => {
					console.error(error);
				});

				axios.get('http://localhost:8080/doubi/getClassifiedVideo?classifyId=' + this.nowClassId).then(
					response => {
						this.videoList = response.data
					}).catch(error => {
					console.error(error);
				});
			}
		})
	</script>
	<script type="text/javascript" src="../js/choiceness.js"></script>
</html>